<template>
  <el-card shadow="hover">
    <view slot="header" class="header">
      <i class="icon el-icon-s-data"></i>
      <text style="flex: 1">订单</text>
      <view class="right_switch">
        <!-- <vk-data-input-select
          style="margin-right: 10px"
          size="small"
          v-model="sale_id"
          :localdata="sale_list"
          @change="onChange(1)"
          :props="{ value: '_id', label: 'nickname' }"
          placeholder="全部销售人员"
        ></vk-data-input-select> -->
        <el-tag
          type="info"
          size="medium"
          v-if="mode != 'week'"
          @click="init('week')"
          >周</el-tag
        >
        <el-tag type="success" size="medium" v-if="mode == 'week'">周</el-tag>

        <el-tag
          type="info"
          size="medium"
          v-if="mode != 'month'"
          @click="init('month')"
          >月</el-tag
        >
        <el-tag type="success" size="medium" v-if="mode == 'month'">月</el-tag>

        <el-tag
          type="info"
          size="medium"
          v-if="mode != 'year'"
          @click="init('year')"
          >年</el-tag
        >
        <el-tag type="success" size="medium" v-if="mode == 'year'">年</el-tag>
      </view>
    </view>
    <view class="box-card-body" style="height: 350px">
      <view id="chartServiceOrder" class="chart"></view>
    </view>
  </el-card>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "chartServiceOrder",
  watch: {
    time(value) {
      console.log(value);
      if (value) {
        this.mode = "custom";
        this.init("custom");
      } else {
        this.init("week");
      }
    },
  },
  data() {
    return {
      mode: "week",
      time: [],
    };
  },
  mounted() {
    this.init("week");
  },
  methods: {
    onChange() {
      console.log("ass");
      this.init(this.mode);
    },
    async init(mode) {
      this.mode = mode;
      const res = await vk.callFunction({
        url: "admin/business/kh.stats.getOrderMyCountGroup",
        data: { type: this.mode },
      });
      let xList = [];
      let yList = [];
      let yList2 = [];
      let yList3 = [];

      res.list.forEach((item) => {
        xList.push(item.text);
        yList.push(item.value);
      });
      res.list2.forEach((item) => {
        yList2.push(item.value);
      });
      // res.list3.forEach((item) => {
      //   yList3.push(item.value);
      // });
      // 渲染图表
      let myChart = echarts.getInstanceByDom(
        document.getElementById("chartServiceOrder")
      );
      if (myChart == null) {
        // 如果不存在，就进行初始化。
        myChart = echarts.init(document.getElementById("chartServiceOrder"));
      }

      let orderNumName = "订单数";
      //销售额
      let salesNmme = "销售额";

      //利润
      // let poriName = "利润	";

      let option = {
        title: {
          show: false,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [orderNumName, salesNmme],
        },
        backgroundColor: "#ffffff",
        grid: {
          left: "1%",
          right: "1%",
          top: "15%",
          bottom: "1%",
          containLabel: true,
        },
        tooltip: { trigger: "axis" },
        xAxis: [
          {
            type: "category",
            axisLabel: { color: "#9a9a9a", interval: 0, rotate: 40 },
            axisLine: { show: true, lineStyle: { color: "#397cbc" } },
            axisTick: { show: false },
            data: xList,
          },
        ],
        yAxis: [
        
          {
            name: `数量`,
            type: "value",
            // axisLine: { show: true, lineStyle: { color: "#dfdfdf" } },
            axisTick: { show: false },
            splitLine: {
              show: true,
              lineStyle: { type: "dashed", color: "#f4f4f4" },
            },
          },
					{
					  name: `金额`,
					  type: "value",
					  minInterval: 1,
					  // axisLine: { show: true, lineStyle: { color: "#dfdfdf" } },
					  axisTick: { show: false },
					  splitLine: {
					    show: true,
					    lineStyle: { type: "dashed", color: "#f4f4f4" },
					  },
					},
        ],
        series: [
          {
            name: "订单数",
            type: "line",

            symbol: "circle",
            // smooth: true,
            // itemStyle: {
            //   normal: {
            //     color: "#00a0a6",
            //     lineStyle: { color: "#00a0a6", width: 1 },
            //     areaStyle: { color: "#b2e2e4" },
            //   },
            // },
            itemStyle: {
              color: "#67C23A",
            },
            markPoint: { itemStyle: { normal: { color: "red" } } },
            data: yList,
          },
          {
            name: salesNmme,
            type: "bar",
						yAxisIndex: 1,
            barMaxWidth: 40,
            data: yList2,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(96, 200, 255, 0.9)",
                  },
                  {
                    offset: 1,
                    color: "rgba(33,115,220,0.9)",
                  },
                ],
              },
            },
          },
          // {
          //   name: poriName,
          //   type: "bar",
          //   barMaxWidth: 40,
          //   data: yList3,
          //   itemStyle: {
          //     color: {
          //       type: "linear",
          //       x: 0,
          //       y: 0,
          //       x2: 0,
          //       y2: 1,
          //       colorStops: [
          //         {
          //           offset: 0,
          //           color: "rgba(196, 200, 255, 0.9)",
          //         },
          //         {
          //           offset: 1,
          //           color: "rgba(133,115,220,0.9)",
          //         },
          //       ],
          //     },
          //   },
          // },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-card__header {
  padding: 14px 16px !important;
}

/deep/ .el-card__body {
  padding: 14px 14px 6px !important;
}
.right_switch {
  padding: 0 16px 16px;

  .el-tag {
    margin: 0 6px;
    padding: 0 10px;
    modesor: pointer;
  }
}
.header {
  display: flex;
  align-items: center;
  font-size: 14px;
  .icon {
    border-radius: 50%;
    border: 5px solid rgb(230, 247, 255);
    background-color: rgb(230, 247, 255);
    color: rgb(24, 144, 255);
    margin-right: 6px;
  }
}

.chart {
  width: 100%;
  height: 100%;
}
</style>
